.actives {
  form {
    padding-left: 10px;
  }
  width: 100%;
  .header-box {
    position: relative;
    width: 100%;
    height: 1079px;
    background-image: url("/static/en/bg-1.png");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    .header-nav {
      font-size: 28px;
      background: rgba(0, 0, 0, 0.7);
      .icon {
        display: inline;
        width: 59px;
        line-height: 77px;
        height: 59px;
        .swith-lan {
          font-size: 28px;
          width: 251px;
          .ar {
            color: #ffa525;
          }
        }
        img {
          width: 45px;
          height: 45px;
        }
      }
      .nav {
        float: right;
        line-height: 77px;
        li {
          display: inline-block;
          a {
            font-size: 28px;
            padding: 0 10px;
            display: inline-block;
            &.active {
              background: rgba(179, 125, 51, 0.6);
            }
          }
        }
      }
    }
    .header-video {
      width: 100%;
      position: absolute;
      bottom: 64px;
      .video-icon {
        width: 234px;
        height: 196px;
        margin: 0 auto;
      }
    }
    .width-cover {
      padding: 0 20px;
    }
  }
  .appointment-reward-box {
    .appointment-reward {
      height: 1081px;
      background-image: url("/static/en/bg-2.png");
      background-size: auto 100%;
      background-position: 0 0;
    }
    .appointment-reward-form {
      height: 1080px;
      background-image: url("/static/en/bg-3.png");
      background-size: auto 100%;
      background-position: 0 0;
      .form-position {
        overflow: hidden;
        color: transparent;
        width: 49.5%;
        padding-left: 12px;
        margin: 0 auto;
        font-size: 28px;
        // color: #907D54;
        .choose-title {
          line-height: 40px;
          margin-top: 46px;
          opacity: 0;
          &::before {
            content: "12";
            background-color: #7f704f;
            display: inline-block;
            margin-left: 6px;
            width: 40px;
            color: #eae6c0;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 30px;
          }
        }
        .choose-radio {
          text-align: left;
        }
        .enter-email {
          width: 100%;
          margin-top: 23px;
          input {
            width: 100%;
            font-size: 28px;
            padding-left: 20px;
            padding-right: 20px;
            color: #666;
            height: 66px;
            background: none;
            border: none;
          }
        }
        .isAgree {
          margin-left: 17px;
          margin-top: 46px;
        }
        .tell-me {
          margin-top: 40px;
          img {
            display: block;
            margin: 0px auto 0;
            width: 455px;
            height: 98px;
            cursor: pointer;
          }
        }
        .like {
          margin-top: 130px;
          margin-left: 260px;
          img {
            width: 144px;
            height: 44px;
          }
        }
        .Privacy {
          font-size: 22px;
          color: #eae6c0;
          margin-top: 54px;
          opacity: 0;
        }
        .choose-radio {
          .left {
            margin-left: 7px;
          }
          .ios {
            margin-top: 12px;
          }
          .Android {
            margin-top: 28px;
          }
        }
      }
    }
    .appointment-reward-dec {
      position: relative;
      height: 1081px;
      background: url("/static/en/bg-4.png") 0 0 no-repeat;
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: 0 0;
      .carousel {
        position: absolute;
        width: 100%;
        height: 498px;
        top: 564px;
        left: 0px;
      }
    }
    .find-more {
      position: relative;
      height: 1080px;
      background-image: url("/static/en/bg-5.png");
      background-size: auto 100%;
      background-position: 0 0;
      .group {
        img {
          cursor: pointer;
        }
        position: absolute;
        top: 602px;
        right: 500px;
        width: 455px;
        height: 98px;
      }
    }
    .guild-war {
      position: relative;
      height: 1162px;
      background-image: url("/static/en/bg-6.png");
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: 0 0;
      .contact {
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 120px;
        left: 50%;
        width: 60%;
        margin-left: -30%;
        a {
          display: inline-block;
          img {
            width: 83px;
            height: 118px;
          }
        }
      }
    }
  }
  .type-mobile {
    input[type="radio"] {
      display: none;
    }
    input[type="radio"] + label::before {
      content: "\a0"; /*不换行空格*/
      background-image: url("/static/images/矩形\ 30.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      display: inline-block;
      vertical-align: middle;
      font-size: 18px;
      width: 30px;
      height: 30px;
      margin-right: 0.4em;
      border-radius: 7px;
      border: 1px solid #7f704f;
      text-indent: 0.15em;
      line-height: 1;
    }
    input[type="radio"]:checked + label::before {
      background-image: url("/static/images/打勾\ \(1\).png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }
  }
  .isAgree {
    input[type="checkbox"] {
      display: none;
    }
    input[type="checkbox"] + label::before {
      background-image: url("/static/images/tick.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      content: "\a0"; /*不换行空格*/
      display: inline-block;
      vertical-align: middle;
      font-size: 18px;
      width: 30px;
      height: 30px;
      margin-right: 0.4em;
      border-radius: 5px;
      border: 1px solid #7f704f;
      text-indent: 0.15em;
      line-height: 1;
    }
    input[type="checkbox"]:checked + label::before {
      background-image: url("/static/images/tick1.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }
  }
}
.actives.ar,.actives.fr {
  div,
  form,
  input,
  textarea,
  a,
  p {
    text-align: right;
    direction: rtl;
  }
  .header-box {
    background-image: url("/static/ar/bg-1.png");
  }
  .appointment-reward-box {
    .appointment-reward {
      background-image: url("/static/ar/bg-2.png");
    }
    .appointment-reward-form {
      background-image: url("/static/ar/bg-3.png");
      background-color: #000;
      text-align: right;
      .form-position {
        width: 50%;
        .like {
          margin-right: 300px;
        }
      }
    }
    .appointment-reward-dec {
      background-image: url("/static/ar/bg-4.png");
    }
    .find-more {
      background-image: url("/static/ar/bg-5.png");
    }
    .guild-war {
      background-image: url("/static/ar/bg-6.png");
    }
  }
  .appointment-reward-box .appointment-reward-form .form-position .like {
    margin-top: 120px;
    margin-right: 30-px;
  }
  .appointment-reward-box .appointment-reward-form .form-position .choose-radio {
    color: #7f704f;
    label {
      margin-right: 0px;
    }
  }
  .flex {
    color: #7f704f;
    a {
      color: #7f704f;
    }
  }
}

.actives.fr {
  .header-box {
    background-image: url("/static/fr/bg-1.png");
  }
  .appointment-reward-box {
    .appointment-reward {
      background-image: url("/static/fr/bg-2.png");
    }
    .appointment-reward-form {
      background-image: url("/static/fr/bg-3.png");
      background-color: #000;
      text-align: right;
      .form-position {
        width: 50%;
        .like {
          margin-right: 300px;
        }
      }
    }
    .appointment-reward-dec {
      background-image: url("/static/fr/bg-4.png");
    }
    .find-more {
      background-image: url("/static/fr/bg-5.png");
    }
    .guild-war {
      background-image: url("/static/fr/bg-6.png");
    }
  }
 
}

@media screen and (max-width: 350px) {
  .iphone5-wrap {
    display: flex;
    justify-content: center;
    display: block;
    .iphone5 {
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
  .actives .header-box .header-nav .icon {
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  .actives .header-box .width-cover {
    padding: 0;
    width: 90%;
  }
}

@media screen and(max-width:800px) {
  .actives {
    .appointment-reward-box {
      .appointment-reward,
      .appointment-reward-form,
      .appointment-reward-dec,
      .find-more {
        height: 1512px;
        background-position: center;
      }
      .guild-war {
        height: 1626.8px;
        background-position: center;
      }
      .appointment-reward-form {
        .form-position {
          width: 71.5%;
          .choose-radio {
            .type-mobile {
              margin-top: 28px;
              margin-left: 28px;
            }
            .Android {
              margin-top: 45px;
            }
          }
          .choose-title {
            margin-top: 80px;
          }
          .enter-email {
            margin-top: 55px;
            margin-left: 20px;
            input {
              width: 1300px;
            }
          }
          .flex {
            .isAgree {
              margin-top: 88px;
              margin-left: 40px;
            }
          }
          .tell-me {
            img {
              margin-top: 80px;
            }
          }
          .like {
            width: 600px;
            margin-top: 200px;
            margin-left: 380px;
            .fb-like,.fb-share-button {
              width: 280px;
              display: inline-block;
            }
          }
        }
      }
      .appointment-reward-dec {
        .carousel {
          height: 694px;
          top: 792px;
        }
      }
      .find-more {
        .group {
          top: 900px;
        }
      }
    }
  }
  .actives.ar {
    .appointment-reward-box {
      .appointment-reward-form {
        .form-position {
          width: 67.3%;
          .choose-radio {
            .type-mobile {
              margin-top: 18px;
            }
            .Android {
              margin-top: 40px;
            }
          }
          .choose-title {
            margin-top: 95px;
          }
          .enter-email {
            margin-top: 55px;
          }
          .flex {
            .isAgree {
              margin-top: 88px;
            }
          }
          .tell-me {
            img {
              margin-top: 80px;
            }
          }
          .like {
            margin-top: 200px;
            margin-right: 420px; 
          }
        }
      }
    }
  }
}
